<template>
  <div class="home">
    <h1>热销爆款</h1>
    <div>
      <div v-for="(item,index) in tab" :key="index" class="tab" @click="changeTab(index)">{{ item }}</div>
    </div>
    <div>
      <div v-for="item in arr[arr_index]" :key="item.id" class="goods" @click="add_crat(item)">
        <img :src=" item.img"><br>
        <span>{{ item.name }}</span><br>
        <span>{{ item.price | price()}}</span><br>
      </div>
    </div>
    <div>
      <div>
          <table border="1">
            <thead>
              <tr>
                <th><input type="checkbox" @click="checkAll($event)">全选</th>
                <th>商品名称</th>
                <th>商品图片</th>
                <th>商品价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in crat " :key="item.id">
                <td><input type="checkbox" @click="check($event,item)" :checked="item.is"></td>
                <td>{{ item.name }}</td>
                <td><img :src="item.img"></td>
                <td>{{ item.price | price()}}</td>
                <td>
                  <button @click="num_change('-',item)">-</button>
                  <input type="text" v-model="item.num" @keyup="numChange(item.num,item)">
                  <button @click="num_change('+',item)">+</button>
                </td>
                <td>{{ item.subtotal | price() }}</td>
                <td>
                  <button @click="del_crat(item.id)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div>
            <p>总价格为<span>{{ Total_price | price() }}</span></p>
          </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data(){
    return {
      arr_index:0,
      tab:['电器1','电器2','电器3','电器4','电器5','电器6'],
      // 商品列表
      arr:[[{
        is:false,
        id:1,
        name:'美的空调',
        price:1559,
        img:'https://img12.360buyimg.com/n7/jfs/t1/290351/24/13794/150137/684bc64bF9fd0519f/0babd66d474460c0.jpg'
    },
    {
        is:false,
        id:2,
        name:'格力空调',
        price:2375,
        img:'https://img13.360buyimg.com/n7/jfs/t1/312195/19/8391/163858/684823d7F02160d7a/d7301724af6195bd.jpg'
    },
    {
        is:false,
        id:3,
        name:'海尔空调',
        price:1479,
        img:'https://img10.360buyimg.com/n7/jfs/t1/308687/15/5431/152133/68399059Fe85c7647/f06132973123e021.jpg'
    }],
    [{
        is:false,
        id:1,
        name:'小米（MI）REDMI智能电视',
        price:1449,
        img:'https://img12.360buyimg.com/n7/jfs/t1/308423/26/9039/136155/684bce9fFc053af5f/035cbc368afca6f2.jpg'
    },{
        is:false,
        id:2,
        name:'Vidda 海信电视55英寸 R55',
        price:1449,
        img:'https://img12.360buyimg.com/n7/jfs/t1/304350/21/10312/158586/684bd156F7a11748c/31526b64754b8532.jpg'
    },{
        is:false,
        id:3,
        name:'TCL雷鸟 32英寸雀5SE',
        price:488,
        img:'https://img14.360buyimg.com/n7/jfs/t1/309249/25/7159/180273/68424cfeF253094f5/96168ef68969964e.jpg'
    },],
    [
      {
        is:false,
        id:1,
        name:'米家小米电吹风',
        price:67.5,
        img:'https://img11.360buyimg.com/n7/jfs/t1/320959/10/8546/104678/684b9673F1dddd0c9/2715a2be75160db2.jpg'
    },{
        is:false,
        id:2,
        name:' 美的（Midea）养生壶',
        price:68.9,
        img:'https://img12.360buyimg.com/n7/jfs/t1/286504/35/6869/170180/684a8487Fd80407e0/bb6415c148f0e0fc.jpg'
    },{
        is:false,
        id:3,
        name:'美的（Midea）电饭煲电饭锅',
        price:109,
        img:'https://img10.360buyimg.com/n7/jfs/t1/318579/7/8884/171121/684bf240F8d4864ce/2e4978853bf0d282.jpg'
    },
    ],
    [
      {
        is:false,
        id:1,
        name:'志高（CHIGO）全自动洗衣机',
        price:271,
        img:'https://img14.360buyimg.com/n7/jfs/t1/291180/18/3656/81941/681b1aa6F5508034d/b5cac48f4b674aef.jpg'
    },{
        is:false,
        id:2,
        name:'海尔（Haier）波轮洗衣机',
        price:671,
        img:'https://img12.360buyimg.com/n7/jfs/t1/289187/11/9971/184546/6849734eFb80f2c69/6e8d9e9c9e88d71d.jpg'
    },{
        is:false,
        id:3,
        name:'小天鹅（LittleSwan）滚筒洗衣机',
        price:999,
        img:'https://img10.360buyimg.com/n7/jfs/t1/315499/31/8874/197457/684a2dabF24bf0945/4a7d2bcc19524029.jpg'
    },
    ],
    [
      {
        is:false,
        id:1,
        name:'西门子超薄微平嵌冰箱',
        price:4319,
        img:'https://img10.360buyimg.com/n7/jfs/t1/312556/34/8973/178431/684bc592F344eb6b7/029a618429de8e08.jpg'
    },{
        is:false,
        id:2,
        name:'米家小米大容量家用冰箱',
        price:1529,
        img:'https://img13.360buyimg.com/n7/jfs/t1/291260/2/14039/177923/684af0efFa39c47f1/12f02e8bd8a73575.jpg'
    },{
        is:false,
        id:3,
        name:'志高（CHIGO）小冰箱迷你小型家用',
        price:238,
        img:'https://img10.360buyimg.com/n7/jfs/t1/271587/11/22870/90058/6800f0c4F3ef8f83a/3f966208e874a481.jpg'
    },
    ],
    [
{
        is:false,
        id:1,
        name:'海尔（Haier）变频抽油烟机',
        price:2499,
        img:'https://img14.360buyimg.com/n7/jfs/t1/313119/4/9087/185045/684b9736Fc98d9598/56e5f9861af50bf5.jpg'
    },{
        is:false,
        id:2,
        name:'苏泊电磁炉5000W家用大功率',
        price:123,
        img:'https://img12.360buyimg.com/n7/jfs/t1/271075/1/12181/179425/67e64de3F641740d3/1c85b12fefc88da4.jpg'
    },{
        is:false,
        id:3,
        name:'美的（Midea）电火锅',
        price:119,
        img:'https://img10.360buyimg.com/n7/jfs/t1/317094/4/8281/204124/684a701aFf5d1d6fe/3753cf47d823c807.jpg'
    },
    ]
  ],
      // 购物车
      crat:[],
      total:0,
      num:1
    }
  },
  methods:{
    // tab切换
    changeTab(index){
      this.arr_index = index;
    },
    // 加入购物车
    add_crat(item){
     this.crat.push({
      is:false,
      id:this.crat.length+1,
      name:item.name,
      price:item.price,
      img:item.img,
      num:1,
      subtotal:item.price
     })
    },
    // 删除购物车
    del_crat(id){
      this.crat=this.crat.filter(item=>item.id!=id)
      this.total=0
    },
    // 单选
    check(event,item){
      item.is=event.target.checked;
            this.total=0

    },
    // 全选
    checkAll(event){
      this.crat.forEach(item=>item.is=event.target.checked)
            this.total=0

    },
    // 数量加减
    num_change(type,item){
      if(type=='+'){
              this.total=0
        item.num++;
        item.subtotal=item.num*item.price;
      }else if(type=='-'){
        if(item.num>1){
        this.total=0
          item.num--;
         item.subtotal=item.num*item.price;
        }
      }
    },
    //输入加减
    numChange(num,item){
      item.num=num;
      item.subtotal=item.num*item.price;
    }
    
    
  },
  computed:{
    // 计算总价格(仅限选中)
  Total_price(){
    this.crat.forEach(item=>{
      if(item.is){
        this.total+=item.price*item.num;
      }
    })
    return this.total
  }

  },
  filters:{
    price(price){
      return "￥"+price
    }
  }
}
</script>

<style>
  .tab{
    display: inline-block;
    /* background: red; */
    color: red;
    width: 100px;
    height: 50px;
  }
  .goods{
    display: inline-block;
    margin-left: 10px;
  }
  .goods img{
    width: 150px;
  }
  tbody img{
    width: 100px;
  }
</style>